<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>音乐播放器</title>
  <style>
    .volume-control {
      margin-top: 10px;
    }
  </style>
</head>
<body>
<h2>音乐播放器</h2>

<div class="volume-control">
  <label for="volumeSlider">音量调节：</label>
  <input type="range" id="volumeSlider" min="0" max="2" step="0.01" value="1">
  <button id="playButton">播放</button>
</div>

<script>
  const AudioContext = window.AudioContext || window.webkitAudioContext;
  const audioContext = new AudioContext();
  let gainNode = audioContext.createGain();
  gainNode.gain.value = 1;
  gainNode.connect(audioContext.destination);

  const volumeSlider = document.getElementById('volumeSlider');
  const playButton = document.getElementById('playButton');
  let source;

  volumeSlider.addEventListener('input', function() {
    gainNode.gain.value = this.value;
  });

  playButton.addEventListener('click', function() {
    if (audioContext.state === 'suspended') {
      audioContext.resume();
    }

    if (source) {
      source.stop();
    }

    fetch('https://forest-cloud.awsl.info/f/legsK/Forestation-V1.mp3')
            .then(response => response.arrayBuffer())
            .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
            .then(audioBuffer => {
              source = audioContext.createBufferSource();
              source.buffer = audioBuffer;
              source.connect(gainNode);
              source.start(0);
            })
            .catch(e => console.error(e));
  });
</script>
</body>
</html>
